<template>
	<div id="app">
		<div class="container">
			<!-- 地址信息卡片 -->
			<div class="address-card">
				<div class="input-item">
					<div class="input-label">收货人</div>
					<input class="input-field" type="text" placeholder="请输入姓名" v-model="consignee">
				</div>
				<div class="input-item">
					<div class="input-label">手机号码</div>
					<input class="input-field" type="tel" placeholder="请输入手机号码" v-model="addressPhoneNumber">
				</div>
				<div class="input-item" @click="showAreaPicker = true">
					<div class="input-label">所在地区</div>
					<input class="input-field" type="text" placeholder="请选择" :value="selectedArea" readonly>
					<span class="arrow-icon">›</span>
				</div>
				<div class="input-item">
					<div class="input-label">详细地址</div>
					<input class="input-field" type="text" placeholder="请填写详细地址" v-model="address">
				</div>
			</div>


			<!-- 保存按钮 -->
			<button class="save-button" @click="saveAddress">保存</button>
			<view>
				<u-toast ref="uToast" />
			</view>

			<!-- 地区选择器 -->
			<u-picker mode="region" v-model="showAreaPicker" @confirm="areaConfirm"></u-picker>

		</div>
	</div>
</template>

<script>
	import {
		insertAddress
	} from '@/api/address.js'
	import store from '../../store';
	export default {
		data() {
			return {
				consignee: '',
				addressPhoneNumber: '',
				selectedArea: '',
				address: '',
				provinceData: '',
				cityData: '',
				districtData: '',
				isDefault: false,
				showAreaPicker: false,

			}
		},
		methods: {
			areaConfirm(e) {
				this.selectedArea = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
				this.provinceData = e.province.label;
				this.cityData = e.city.label;
				this.districtData = e.area.label;
			},
			saveAddress() {
				const params = {
					consignee: this.consignee,
					addressPhoneNumber: this.addressPhoneNumber,
					addressUserId: this.$store.state.userId,
					address: this.address,
					economize: this.provinceData,
					market: this.cityData,
					distinguish: this.districtData
				}
				insertAddress(params).then((res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '添加成功',
							type: 'success',
						})
					} else {
						this.$refs.uToast.show({
							title: '添加失败',
							type: 'error',
						})
					}
				}))
			}
		}
	};
</script>

<style>
	body {
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		margin: 0;
		padding: 0;
	}

	.container {
		padding: 20px;
		max-width: 500px;
		margin: 0 auto;
	}

	.address-card {
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		margin-bottom: 20px;
	}

	.input-item {
		padding: 16px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
	}

	.input-item:last-child {
		border-bottom: none;
	}

	.input-label {
		width: 80px;
		font-size: 16px;
		color: #333;
	}

	.input-field {
		flex: 1;
		font-size: 16px;
		border: none;
		outline: none;
		color: #333;
	}

	.input-field::placeholder {
		color: #999;
	}

	.switch-container {
		background-color: #fff;
		border-radius: 12px;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		margin-bottom: 20px;
	}

	.switch-label {
		font-size: 16px;
		color: #333;
	}

	.save-button {
		background-color: #2979ff;
		color: white;
		border: none;
		border-radius: 8px;
		padding: 16px;
		font-size: 16px;
		width: 100%;
		font-weight: 500;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.save-button:active {
		background-color: #1c6de9;
	}

	.arrow-icon {
		color: #ccc;
		font-size: 18px;
	}
</style>